<template>
	<view class="container">
		<u-tabs :list="list1" @change="click" lineColor='#FF575B' :activeStyle="{color: '#FF575B'}"
			style="width: 100%;"></u-tabs>
		<u-empty v-if="show" mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png">
		</u-empty>
		<view class="all" v-else>
			<view class="box">
				<view class="title">
					可用优惠卷
				</view>
				<view class="lists" v-for="(item , index) in list" @click="car(item.id,item.discount_price)">
					<view class="left">
						<view class="top">
							<text class="s1">￥</text>
							<text class="s2">{{item.discount_price}}</text>
						</view>
						<view class="bot">
							满{{item.full_price}}可用
						</view>
					</view>
					<view class="right">
						<view class="one">
							{{item.name}}
						</view>
						<view class="two">
							有效期至{{item.end_time}}
						</view>
						<view class="three" v-if="item.cate_name==null">
							不限制使用
						</view>
						<view class="three" v-else>
							{{item.cate_name}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				list1: [{
					name: '可使用',
				}, {
					name: '已使用',
				}, {
					name: '未使用',
				}],
				list: [],
				show: null,
				car2: ""
			}
		},
		onLoad(option) {
			this.car2 = option.car
			this.getyouhuijuan()
		},
		methods: {
			car(i,price) {
				if (this.car2) {
					uni.$emit("upyouhui",{i,price})
					uni.navigateBack({
						delta:1
					})
				}

			},
			async getyouhuijuan() {
				const res = await this.$api("/api/user/coupon", 'post', {
					type: this.current
				}).then((res) => {
					console.log(res.data.data);
					if (res.data.code == 1) {
						this.list = res.data.data
						if (res.data.data.length == 0) {
							this.show = true
						} else {
							this.show = false
						}
					}
				})
			},
			click(i) {
				const a = i.index + 1
				this.current = a
				this.getyouhuijuan()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		.box {
			margin: 10px 0;

			.title {
				font-size: 16px;
				font-weight: bold;
				color: #333333;

				text {
					margin-left: 10px;
					font-size: 13px;
					font-weight: 400;
					color: #FB774B;
				}
			}

			.lists {
				margin: 10px 0;
				background-image: url('../../static/img/bgbig.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 15px 5px;
				display: flex;
				align-items: center;


				.left {
					width: 25%;
					text-align: center;

					.top {
						.s1 {
							font-size: 12px;
							font-weight: 400;
							color: #FF575B;
						}

						.s2 {
							font-size: 20px;
							font-weight: 900;
							color: #FF575B;
						}
					}

					.bot {
						font-size: 10px;
						font-weight: 400;
						color: #666666;
					}
				}

				.right {
					flex: 1;
					margin-left: 10px;

					.one {
						font-size: 11px;
						font-weight: 400;
						color: #333333;
						margin: 5px 0;
					}

					.two {
						font-size: 10px;
						font-weight: 400;
						color: #666666;
						margin: 5px 0;
					}

					.three {
						font-size: 10px;
						font-weight: 400;
						color: #FF575B;
						margin: 5px 0;
					}

				}
			}
		}
	}

	view {
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
	}

	.container {
		padding: 20px 15px;
		background-color: #f5f5f5;
		min-height: calc(100vh - 44px);
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>